irongit
Sign inRegister
huncholanehuncholane/dotbarPublic

Waybar configuration

dotbar/style/[Rainbow] RGB Bordered.css
308 lines5.3 KBCSS
RawDownloadHistory
1/* ---- 💫 https://github.com/JaKooLit 💫 ---- */
2/* Catppuccin Mocha - Rainbow Bordered */
3/* Designed by https://github.com/0xl30 */
4
5* {
6 font-family: "JetBrainsMono Nerd Font";
7 font-weight: bold;
8 min-height: 0;
9 /* set font-size to 100% if font scaling is set to 1.00 using nwg-look */
10 font-size: 97%;
11 font-feature-settings: '"zero", "ss01", "ss02", "ss03", "ss04", "ss05", "cv31"';
12}
13
14@import "../waybar/style/catppuccin-themes/rgbmocha.css";
15
16window#waybar {
17 transition-property: background-color;
18 transition-duration: 0.5s;
19 background: transparent;
20 border-radius: 2px;
21}
22
23window#waybar.hidden {
24 opacity: 0.2;
25}
26
27window#waybar.empty,
28window#waybar.empty #window {
29 background-color: transparent;
30 padding: 0px;
31 border: 0px;
32}
33
34#taskbar button,
35#workspaces button {
36 color: @overlay1;
37 box-shadow: none;
38 text-shadow: none;
39 padding: 0px;
40 border-radius: 9px;
41 padding-left: 4px;
42 padding-right: 4px;
43 animation: gradient_f 20s ease-in infinite;
44 transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.682);
45}
46
47#taskbar button:hover,
48#workspaces button:hover {
49 border-radius: 10px;
50 color: @peach;
51 background-color: @surface0;
52 padding-left: 2px;
53 padding-right: 2px;
54 animation: gradient_f 20s ease-in infinite;
55 transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
56}
57
58#workspaces button.persistent {
59 color: @surface1;
60 border-radius: 10px;
61}
62
63#taskbar button.active,
64#workspaces button.active {
65 color: @mauve;
66 border-radius: 10px;
67 padding-left: 8px;
68 padding-right: 8px;
69 animation: gradient_f 20s ease-in infinite;
70 transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
71}
72
73#workspaces button.urgent {
74 color: @red;
75 border-radius: 0px;
76}
77
78/* This section can be use if you want to separate waybar modules */
79.modules-left, .modules-center, .modules-right {
80 background: @theme_base_color;
81 border: 2px solid transparent;
82 padding-top: 2px;
83 padding-bottom: 2px;
84 padding-right: 4px;
85 padding-left: 4px;
86 border-radius: 0px;
87
88 border-image: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet) 1;
89 animation: rainbow-gradient 20s ease-in-out infinite; /* Adjust timing as needed */
90}
91
92
93#backlight,
94#backlight-slider,
95#battery,
96#bluetooth,
97#clock,
98#cpu,
99#disk,
100#idle_inhibitor,
101#keyboard-state,
102#memory,
103#mode,
104#mpris,
105#network,
106#power-profiles-daemon,
107#pulseaudio,
108#pulseaudio-slider,
109#taskbar button,
110#taskbar,
111#temperature,
112#tray,
113#window,
114#wireplumber,
115#workspaces,
116#custom-backlight,
117#custom-browser,
118#custom-cava_mviz,
119#custom-cycle_wall,
120#custom-dot_update,
121#custom-file_manager,
122#custom-keybinds,
123#custom-keyboard,
124#custom-light_dark,
125#custom-lock,
126#custom-hint,
127#custom-hypridle,
128#custom-menu,
129#custom-playerctl,
130#custom-power_vertical,
131#custom-power,
132#custom-quit,
133#custom-reboot,
134#custom-settings,
135#custom-spotify,
136#custom-swaync,
137#custom-tty,
138#custom-updater,
139#custom-weather,
140#custom-weather.clearNight,
141#custom-weather.cloudyFoggyDay,
142#custom-weather.cloudyFoggyNight,
143#custom-weather.default,
144#custom-weather.rainyDay,
145#custom-weather.rainyNight,
146#custom-weather.severe,
147#custom-weather.showyIcyDay,
148#custom-weather.snowyIcyNight,
149#custom-weather.sunnyDay {
150 padding-top: 4px;
151 padding-bottom: 4px;
152 padding-right: 6px;
153 padding-left: 6px;
154}
155/*-----Indicators----*/
156#custom-hypridle.notactive,
157#idle_inhibitor.activated {
158 color: #39FF14;
159}
160
161#bluetooth,
162#backlight {
163 color: @blue;
164}
165
166#battery {
167 color: @green;
168}
169
170@keyframes blink {
171 to {
172 color: @surface0;
173 }
174}
175
176#battery.critical:not(.charging) {
177 background-color: @red;
178 color: @theme_text_color;
179 animation-name: blink;
180 animation-duration: 3.0s;
181 animation-timing-function: steps(12);
182 animation-iteration-count: infinite;
183 animation-direction: alternate;
184 box-shadow: inset 0 -3px transparent;
185}
186
187#clock {
188 color: @yellow;
189}
190
191#cpu {
192 color: @green;
193}
194
195#custom-keyboard,
196#memory {
197 color: @sky;
198}
199
200#disk {
201 color: @sapphire;
202}
203
204#temperature {
205 color: @teal;
206}
207
208#temperature.critical {
209 background-color: @red;
210}
211
212#tray > .passive {
213 -gtk-icon-effect: dim;
214}
215#tray > .needs-attention {
216 -gtk-icon-effect: highlight;
217}
218
219#keyboard-state {
220 color: @flamingo;
221}
222
223#custom-cava_mviz {
224 animation: rainbow-text 0.80s linear infinite;
225}
226
227@keyframes rainbow-text {
228 0% { color: rgb(0, 247, 198); } /* Low amplitude */
229 42% { color: rgb(60, 0, 179); } /* Mid amplitude */
230 71% { color: indigo; } /* Higher amplitude */
231 100% { color: rgb(234, 0, 255); } /* Maximum amplitude */
232}
233
234
235#custom-menu {
236 color: @rosewater;
237}
238
239#custom-power {
240 color: @red;
241}
242
243#custom-updater {
244 color: @red;
245}
246
247#custom-light_dark {
248 color: @blue;
249}
250
251#custom-weather {
252 color: @lavender;
253}
254
255#custom-lock {
256 color: @maroon;
257}
258
259#pulseaudio {
260 color: @sapphire;
261}
262
263#pulseaudio.bluetooth {
264 color: @pink;
265}
266#pulseaudio.muted {
267 color: @red;
268}
269
270#window {
271 color: @mauve;
272}
273
274#mpris {
275 color:@lavender;
276}
277
278#network {
279 color: @teal;
280}
281#network.disconnected,
282#network.disabled {
283 background-color: @surface0;
284 color: @text;
285}
286
287#backlight-slider slider,
288#pulseaudio-slider slider {
289 min-width: 0px;
290 min-height: 0px;
291 opacity: 0;
292 background-image: none;
293 border: none;
294 box-shadow: none;
295}
296
297#backlight-slider trough,
298#pulseaudio-slider trough {
299 min-width: 80px;
300 min-height: 5px;
301 border-radius: 5px;
302}
303
304#backlight-slider highlight,
305#pulseaudio-slider highlight {
306 min-height: 10px;
307 border-radius: 5px;
308}